<template>
	<view>
		<view class="status" :style="{ opacity: afterHeaderOpacity }"></view>

		<view class="header">
			<!-- 头部-默认显示 -->
			<view class="before" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
				<view class="back">
					<view class="icon xiangqian" @tap="back" v-if="showBack"></view>
				</view>
				<view class="middle"></view>
			</view>
			<!-- 头部-滚动渐变显示 -->
			<view class="after" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }">
				<view class="back">
					<view class="icon xiangqian" @tap="back" v-if="showBack"></view>
				</view>
				<view class="middle">
					<view v-for="(anchor, index) in anchorlist" :class="[selectAnchor == index ? 'on' : '']" :key="index" @tap="toAnchor(index)">{{ anchor.name }}</view>
				</view>

			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="footer">
			<view class="btn">
				<!-- 	<view class="joinCart" @tap="joinCart">加入购物车</view>
				<view class="buy" @tap="joinCart">{{i18n.buyNow}}</view> -->
				<view class="joinCart" @tap="joinCart">{{i18n.addToCart}}</view>
				<view class="buy" @tap="buyNow">{{i18n.buyNow}}</view>
			</view>
		</view>
		<!-- 服务-模态层弹窗 -->
		<view class="popup service" :class="serviceClass" @touchmove.stop.prevent="discard" @tap="hideService">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="content">
					<view class="row" v-for="(item, index) in goodsData.service" :key="index">
						<view class="title">
							<uni-icons type="checkbox" size="16" color="#dc2436" class="iconBox"></uni-icons>
							{{ item.name }}
						</view>
						<view class="description">{{ item.description }}</view>
					</view>
				</view>
				<view class="btn">
					<!-- <view class="button" @tap="hideService">{{i18n.complete}}</view> -->
					<view class="joinCart" @tap="innerjoinCart">{{i18n.addToCart}}</view>
					<view class="buy" @tap="buy">{{i18n.buyNow}}</view>
				</view>
			</view>
		</view>
		<!-- 规格-模态层弹窗 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" @tap="hideSpec">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="config">
					<view class="a-t">
						<image src="/static/img/goodsInfo/banner01.jpg"></image>
						<view class="right">
							<text class="price">¥{{total}}</text>
							<view class="selected">
								{{i18n.selected}}：
								<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">{{ sItem.name }}</text>
							</view>
						</view>
					</view>
					<view class="configList">
						<view v-for="(item, index) in goodsData.specList" :key="index" class="attr-list">
							<text>{{ item.name }}</text>
							<view class="item-list">
								<text v-for="(childItem, childIndex) in goodsData.specChildList" v-if="childItem.pid === item.id" :key="childIndex"
								 class="tit" :class="{ selected: childItem.selected }" @click="selectSpecs(childIndex, childItem.pid)">
									{{ childItem.name }}
								</text>
							</view>
						</view>
					</view>
					<view class="length">
						<view class="text">{{i18n.number}}</view>
						<view class="number">
							<view class="sub" @tap.stop="sub">
								<view class="icon jian"></view>
							</view>
							<view class="input" @tap.stop="discard"><input type="number" v-model="goodsData.number" /></view>
							<view class="add" @tap.stop="add">
								<view class="icon jia"></view>
							</view>
						</view>
					</view>
					<view class="btn">
						<view class="buy" @tap="buy">{{i18n.placeAnOrder}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品主图轮播 -->
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="swiper in swiperList">
					<!-- <swiper-item> -->
					<image :src="swiper.bigImageFileShow"></image>
				</swiper-item>
			</swiper>
			<!-- <view class="indicator">{{ currentSwiper + 1 }}/{{ swiperList.length }}</view> -->
		</view>
		<!-- 标题 价格 -->
		<view class="info-box goods-info">
			<view class="titleBox">
				<view class="price">￥{{ product.price }}</view>
				<view class="box" @tap="keep">
					<view class="icon" :class="[isKeep ? 'shoucangsel' : 'shoucang']"></view>
					<view class="text">{{ isKeep ? '已' : '' }}{{i18n.collect}}</view>
				</view>
			</view>
			<view class="title">{{ product.name }}</view>
			<view class="cont">{{ product.barCode }}</view>
		</view>
		<!-- 服务-规则选择 -->
		<view class="info-box spec">
			<view class="row" @tap="showSpec(false)">
				<view class="text">{{i18n.choice}}</view>
				<view class="content">
					<view v-if="specSelected.length <= 0">{{i18n.chooseColorSpecification}}</view>
					<view class="sp">
						<view v-for="(item, index) in specSelected" :key="index">{{ item.name }}</view>
					</view>
				</view>
				<view class="arrow">
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<view class="row" @tap="showSpec(false)">
				<view class="text">{{i18n.stock}}</view>
				<view class="content">
					19999件
				</view>
				<view class="arrow">
					<view class="icon xiangyou"></view>
				</view>
			</view>
			<view class="row" @tap="showService">
				<view class="text">{{i18n.service}}</view>
				<view class="content">
					<view class="serviceitem" v-for="(item, index) in goodsData.service" :key="index">
						<uni-icons type="checkbox" size="16" color="#dc2436" class="iconBox"></uni-icons>
						{{ item.name }}
					</view>
				</view>
				<view class="arrow">
					<view class="icon xiangyou"></view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="info-box comments" id="comments" style="display: none;">
			<view class="row">
				<view class="text">{{i18n.reviews}}({{ goodsData.comment.number }})</view>
				<view class="arrow" @tap="toRatings">
					<view class="show" @tap="showComments(goodsData.id)">
						{{i18n.viewAll}}
						<view class="icon xiangyou"></view>
					</view>
				</view>
			</view>
			<view class="comment" @tap="toRatings">
				<view class="user-info">
					<view class="face">
						<image :src="goodsData.comment.userface"></image>
					</view>
					<view class="username">{{ goodsData.comment.username }}</view>
					<uni-rate :value="goodsData.comment.star" size="12" disabled="true" class="star"></uni-rate>
				</view>
				<view class="content">{{ goodsData.comment.content }}</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="description">
			<view class="title">———— {{i18n.productDetails}} ————</view>
			<image :src="product.mainImagePath" mode=""></image>
			<!-- <view class="content"><rich-text :nodes="descriptionStr"></rich-text></view> -->
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components: {
			uniRate
		},
		computed: {
			i18n() {
				return this.$t('goods')
			}
		},
		data() {
			return {
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11, //层级
				afterHeaderzIndex: 10, //层级
				beforeHeaderOpacity: 1, //不透明度
				afterHeaderOpacity: 0, //不透明度
				//是否显示返回按钮
				// #ifndef MP
				showBack: true,
				// #endif
				//轮播主图数据
				swiperList: [],
				product: {},
				//轮播图下标
				currentSwiper: 0,
				anchorlist: [], //导航条锚点
				selectAnchor: 0, //选中锚点
				serviceClass: '', //服务弹窗css类，控制开关动画
				specClass: '', //规格弹窗css类，控制开关动画
				// 商品信息
				goodsData: {
					id: 1,
					name: '商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题',
					content: '冷热干湿 一望无际 超长续航 高精准传感器',
					price: '127.00',
					number: 1,
					service: [{
							name: '正品保证',
							description: '此商品官方保证为正品'
						},
						{
							name: '极速退款',
							description: '此商品享受退货极速退款服务'
						},
						{
							name: '7天退换',
							description: '此商品享受7天无理由退换服务'
						},
						{
							name: '满99包邮',
							description: '此商品享受满99包邮服务'
						}
					],
					specList: [{
							id: 1,
							name: '尺寸'
						},
						{
							id: 2,
							name: '颜色'
						}
					],
					specChildList: [{
							id: 1,
							pid: 1,
							name: 'XS'
						},
						{
							id: 2,
							pid: 1,
							name: 'S'
						},
						{
							id: 3,
							pid: 1,
							name: 'M'
						},
						{
							id: 4,
							pid: 1,
							name: 'L'
						},
						{
							id: 5,
							pid: 1,
							name: 'XL'
						},
						{
							id: 6,
							pid: 1,
							name: 'XXL'
						},
						{
							id: 7,
							pid: 2,
							name: '白色'
						},
						{
							id: 8,
							pid: 2,
							name: '珊瑚粉'
						},
						{
							id: 9,
							pid: 2,
							name: '草木绿'
						}
					],

					comment: {
						number: 102,
						userface: '../../static/img/face.jpg',
						username: '雷军',
						star: 5,
						content: '很不错，之前买了很多次了，很好看，能放很久，和图片色差不大，值得购买！'
					}
				},
				total: 0,
				token: '',
				productId: '',
				microShopId: '',
				type: '',
				specSelected: [], //选中规格
				isKeep: false, //收藏
				//商品描述html
				descriptionStr:
					// '<div style="text-align:center;"><img width="100%" src="https://ae01.alicdn.com/kf/HTB1t0fUl_Zmx1VjSZFGq6yx2XXa5.jpg"/><img width="100%" src="https://ae01.alicdn.com/kf/HTB1LzkjThTpK1RjSZFKq6y2wXXaT.jpg"/><img width="100%" src="https://ae01.alicdn.com/kf/HTB18dkiTbvpK1RjSZPiq6zmwXXa8.jpg"/></div>'
					'<div style="text-align:center;"><img width="100%"  style="display:block" src="/static/img/goodsInfo/img01.jpg"/><img width="100%" style="display:block" src="/static/img/goodsInfo/img02.jpg"/><img width="100%" style="display:block" src="/static/img/goodsInfo/img03.jpg"/><img width="100%" style="display:block" src="/static/img/goodsInfo/img04.jpg"/><img width="100%" style="display:block" src="/static/img/goodsInfo/img05.jpg"/><img width="100%" style="display:block" src="/static/img/goodsInfo/img06.jpg"/></div>'
			};
		},
		onLoad(option) {
			const microShopId = uni.getStorageSync('microShopId');
			if (microShopId) {
				this.microShopId = microShopId;
				console.log(microShopId);
			}
			
			// #ifdef MP
			//小程序隐藏返回按钮
			this.showBack = false;
			// #endif
			//option为object类型，会序列化上个页面传递的参数
			console.log(option.id); //打印出上个页面传递的参数。
			if (option.id) {
				this.productId = option.id;
			}
			const token = uni.getStorageSync('token');
			if (token) {
				this.token = token;
				console.log(token);
			}


			this.getProductDetail(option.id)

		},
		onReady() {
			this.calcAnchor(); //计算锚点高度，页面数据是ajax加载时，请把此行放在数据渲染完成事件中执行以保证高度计算正确
			//规格 默认选中第一条
			this.goodsData.specList.forEach(item => {
				for (let cItem of this.goodsData.specChildList) {
					if (cItem.pid === item.id) {
						this.$set(cItem, 'selected', true);
						this.specSelected.push(cItem);
						break; //forEach不能使用break
					}
				}
			});
		},
		onPageScroll(e) {
			//锚点切换
			this.selectAnchor = e.scrollTop >= this.anchorlist[2].top ? 2 : e.scrollTop >= this.anchorlist[1].top ? 1 : 0;
			//导航栏渐变
			let tmpY = 375;
			e.scrollTop = e.scrollTop > tmpY ? 375 : e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
			//切换层级
			this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
			this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		onReachBottom() {
			uni.showToast({
				title: '触发上拉加载'
			});
		},
		mounted() {},
		methods: {
			addCart() {
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/shoppingCart/add', //加入购物车
					data: {
						// microShopId: "c0a8007c-6e48-18b9-816e-48d048c70043",
						microShopId: this.microShopId,
						ecShopProdcutId: this.productId, //门店商品ID
						count: this.goodsData.number,
						itemType: "buy",
						sku: "sku001",
						specName: "白色",
					},
					method: 'POST',
					dataType: 'json',
					header: {
						'token': this.token,
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data.message);
						alert(res.data.data.message);

						// this.product = res.data.data.ecProduct;
					}
				});
			},

			getProductDetail(id) {
				
				if(this.$i18n.locale=='en-US'){
					var language='en_US'
				}else{
					var language='zh_CN'
				}
				console.log(language)
				uni.request({
					url: 'http://121.40.82.3:52019/v1/template001/product/detail', //获取商品详情
					data: {
						id: id,
						language:language
					},
					method: 'GET',
					dataType: 'json',
					header: {
						'token': this.token,
						'content-type': 'application/json ' //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data.data);
						console.log(res.data.data.ecShopProductImages);
						console.log(res.data.data.isFavorite);
						this.product = res.data.data;
						this.swiperList = res.data.data.ecShopProductImages;
						this.productId = res.data.data.id;
						if (res.data.data.isFavorite == '0') {
							this.isKeep = false;
						} else {
							this.isKeep = true;
						}


					}
				});
			},
			//轮播图指示器
			swiperChange(event) {
				this.currentSwiper = event.detail.current;
			},
			//收藏
			keep() {
				console.log(this.isKeep)
				if (this.token) {
					if (this.isKeep == false) {
						uni.request({
							url: 'http://121.40.82.3:52019/v1/template001/favorite/add', //收藏商品
							data: {
								ecShopProductId: this.productId,
								// microShopId: "c0a8007c-6e48-18b9-816e-48d046f30040"
								microShopId: this.microShopId
							},
							method: 'POST',
							dataType: 'json',
							header: {
								'token': this.token,
								'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
							},
							success: (res) => {
								console.log(res);
								alert(res.data.data.message);
								this.isKeep = true;

							}
						});
					} else {
						uni.request({
							url: 'http://121.40.82.3:52019/v1/template001/favorite/cancel', //取消收藏商品
							data: {
								ecShopProductId: this.productId,
								// microShopId: "c0a8007c-6e48-18b9-816e-48d046f30040"
								microShopId: this.microShopId
							},
							method: 'POST',
							dataType: 'json',
							header: {
								'token': this.token,
								'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
							},
							success: (res) => {
								console.log(res);
								alert(res.data.data.message);
								this.isKeep = false;

							}
						});
					}
				} else {
					uni.navigateTo({
						url: '../login/login?id=' + this.productId
					});
				}
			},
			// 加入购物车
			joinCart() {
				console.log(this.token)
				if (this.token) {
					this.showSpec(false);
				} else {
					uni.navigateTo({
						url: '../login/login?id=' + this.productId
					});
				}

			},
			buyNow() {
				console.log(this.token)
				if (this.token) {
					this.showSpec(false);
					this.type = 'buyNow';
				} else {
					uni.navigateTo({
						url: '../login/login?id=' + this.productId
					});
				}
			},
			//立即购买
			buy() {
				this.hideSpec();
				this.toConfirmation();
			},
			// 加入购物车
			innerjoinCart() {
				if (this.specSelected.length >= 3) {
					uni.showToast({
						title: '已加入购物车'
					});
					this.hideSpec();
				} else {
					uni.showToast({
						title: '请选择配置',
						icon: 'none'
					});
				}
			},
			//商品评论
			toRatings() {
				uni.navigateTo({
					url: 'ratings/ratings'
				});
			},

			//跳转确认订单页面
			toConfirmation() {
				this.addCart();

				// let config = ''
				// this.specSelected.map(res => {
				// 	config += res.name + ' '
				// })
				// let tmpList = [];
				// let goods = {
				// 	id: this.goodsData.id,
				// 	img: '../../static/img/goods/p1.jpg',
				// 	name: this.goodsData.name,
				// 	// spec: '规格:' + this.goodsData.spec[config],
				// 	spec: '规格:' + config,
				// 	price: this.goodsData.price,
				// 	number: this.goodsData.number
				// };
				// tmpList.push(goods);
				// uni.setStorage({
				// 	key: 'buylist',
				// 	data: tmpList,
				// 	success: () => {
				// 		uni.navigateTo({
				// 			url: '../order/confirmation'
				// 		});
				// 	}
				// });
				setTimeout(() => {
					if (this.type == 'buyNow') {
						uni.navigateTo({
							url: '../order/confirmation?type=' + this.type
						});
						this.type = '';
					}
				}, 2000);

			},
			//跳转评论列表
			showComments(goodsid) {},
			//选择规格
			selectSpecs(index, pid) {
				let list = this.goodsData.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				});

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				});
			},

			//减少数量
			sub() {
				if (this.goodsData.number <= 1) {
					return;
				}
				this.goodsData.number--;
				this.total = this.product.price * this.goodsData.number
			},
			//增加数量
			add() {
				this.goodsData.number++;
				console.log(this.goodsData.number)
				this.total = this.product.price * this.goodsData.number
			},
			//跳转锚点
			toAnchor(index) {
				this.selectAnchor = index;
				uni.pageScrollTo({
					scrollTop: this.anchorlist[index].top,
					duration: 200
				});
			},
			//计算锚点高度
			calcAnchor() {
				this.anchorlist = [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}];
				let commentsView = uni.createSelectorQuery().select('#comments');
				commentsView
					.boundingClientRect(data => {
						let statusbarHeight = 0;
						//APP内还要计算状态栏高度
						// #ifdef APP-PLUS
						statusbarHeight = plus.navigator.getStatusbarHeight();
						// #endif
						let headerHeight = uni.upx2px(100);
						this.anchorlist[1].top = data.top - headerHeight - statusbarHeight;
						this.anchorlist[2].top = data.bottom - headerHeight - statusbarHeight;
					})
					.exec();
			},
			//返回上一页
			back() {
				uni.navigateBack();
			},
			//服务弹窗
			showService() {
				console.log('show');
				this.serviceClass = 'show';
			},
			//关闭服务弹窗
			hideService() {
				this.serviceClass = 'hide';
				setTimeout(() => {
					this.serviceClass = 'none';
				}, 200);
			},
			//规格弹窗
			showSpec(fun) {
				console.log('show');
				this.specClass = 'show';
				this.specCallback = fun;
			},
			specCallback() {
				return;
			},
			//关闭规格弹窗
			hideSpec() {
				this.specClass = 'hide';
				//回调
				this.specSelected && this.specCallback && this.specCallback();
				this.specCallback = false;
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			discard() {
				//丢弃
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	@keyframes showPopup {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes hidePopup {
		0% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}

	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}

		100% {
			transform: translateY(0);
		}
	}

	.icon {
		font-size: 26upx;
	}

	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
		background-color: #f1f1f1;
		transition: opacity 0.05s linear;
	}

	.header {
		width: 100%;

		height: 100upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);

		/*  #endif  */
		.before,
		.after {
			width: 92%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
			transition: opacity 0.05s linear;

			.back {
				width: 125upx;
				height: 60upx;
				flex-shrink: 0;

				.icon {
					margin-left: -10%;
					width: 60upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42upx;
				}
			}

			.middle {
				width: 100%;
			}

			.icon-btn {
				width: 60upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;

				.icon {
					&:first-child {
						margin-right: 5upx;
					}

					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 42upx;
				}
			}
		}

		.before {
			.back {
				.icon {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 100%;
				}
			}

			.icon-btn {
				.icon {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 100%;
				}
			}
		}

		.after {
			background-color: #f1f1f1;

			.back {
				.icon {
					color: #666;
				}
			}

			.icon-btn {
				.icon {
					color: #666;
				}
			}

			.middle {
				font-size: 32upx;
				height: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 7%;

				view {
					width: (100%/3);
					padding: 10upx 3%;
					margin: 0 3%;
					display: flex;
					justify-content: center;
					align-items: center;

					&.on {
						margin-bottom: -4upx;
						color: #8b6945;
						border-bottom: solid 4upx #8b6945;
					}
				}
			}
		}
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;

		swiper {
			width: 100%;
			height: 100vw;

			swiper-item {
				image {
					width: 100%;
					height: 100vw;
				}
			}
		}

		.indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 25upx;
			height: 40upx;
			border-radius: 40upx;
			font-size: 22upx;
			position: absolute;
			bottom: 20upx;
			right: 20upx;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.info-box {
		width: 92%;
		padding: 20upx 4%;
		background-color: #fff;
		margin-bottom: 20upx;
	}

	.goods-info {
		.titleBox {
			display: flex;
			align-items: center;

			.price {
				font-size: 46upx;
				font-weight: 600;
				color: #ae0805;
			}

			.box {
				margin-left: auto;
				width: 80upx;
				height: 80upx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.icon {
					font-size: 40upx;
					color: #828282;

					&.shoucangsel {
						color: #ff1246;
					}
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 22upx;
					color: #666;
				}
			}
		}

		.title {
			font-size: 30upx;
		}

		.cont {
			margin-top: 20upx;
			font-size: 24upx;
			color: #333333;
		}
	}

	.spec {
		.row {
			width: 100%;
			display: flex;
			align-items: center;
			margin: 0 0 30upx 0;

			.text {
				font-size: 24upx;
				color: #a2a2a2;
				margin-right: 20upx;
				flex-shrink: 0;
			}

			.content {
				font-size: 28upx;
				display: flex;
				flex-wrap: wrap;
				padding-right: 10upx;

				.serviceitem {
					margin-right: 10upx;
					display: flex;
					align-items: center;

					.iconBox {
						margin-top: 5upx;
						margin-right: 5upx;
					}
				}

				.sp {
					width: 100%;
					display: flex;
					align-items: center;

					view {
						margin-right: 10upx;
					}
				}
			}

			.arrow {
				position: absolute;
				right: 4%;

				.icon {
					color: #ccc;
				}
			}
		}
	}

	.comments {
		.row {
			width: 100%;
			height: 40upx;
			display: flex;
			align-items: center;
			margin: 0 0 30upx 0;

			.text {
				font-size: 30upx;
			}

			.arrow {
				font-size: 28upx;
				position: absolute;
				right: 4%;
				color: #666;

				.show {
					display: flex;
					align-items: center;

					.icon {
						color: #666;
					}
				}
			}
		}

		.comment {
			width: 100%;

			.user-info {
				width: 100%;
				height: 40upx;
				display: flex;
				align-items: center;

				.face {
					width: 40upx;
					height: 40upx;
					margin-right: 8upx;

					image {
						width: 40upx;
						height: 40upx;
						border-radius: 100%;
					}
				}

				.username {
					font-size: 24upx;
					color: #999;
				}

				.star {
					margin-left: auto;
					margin-top: 5upx;
				}
			}

			.content {
				margin-top: 10upx;
				font-size: 26upx;
			}
		}
	}

	.description {
		.title {
			width: 100%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #999;
		}
	}

	.footer {
		position: fixed;
		bottom: 0upx;
		width: 92%;
		padding: 0 4%;
		height: 99upx;
		border-top: solid 1upx #eee;
		background-color: #fff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.btn {
			width: 100%;
			height: 80upx;
			border-radius: 40upx;
			overflow: hidden;
			display: flex;
			margin-right: -2%;

			.joinCart,
			.buy {
				width: 50%;
				height: 80upx;
				// padding: 0 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
			}

			.joinCart {
				background-color: #d19c60;
			}

			.buy {
				background-color: #f14e4f;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.layer {
			position: fixed;
			z-index: 22;
			bottom: -70%;
			width: 92%;
			padding: 0 4%;
			height: 70%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;

			.content {
				width: 100%;
				padding: 20upx 0;
			}

			.btn {
				width: 100%;
				height: 100upx;

				.button {
					width: 100%;
					height: 80upx;
					border-radius: 40upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #f47952;
					font-size: 28upx;
				}
			}
		}

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		&.service {
			.row {
				margin: 30upx 0;

				.title {
					font-size: 30upx;
					margin: 10upx 0;
					display: flex;
					align-items: center;

					.iconBox {
						margin-top: 5upx;
						margin-right: 10upx;
					}
				}

				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}

		&.spec {
			.title {
				font-size: 30upx;
				margin: 30upx 0;
			}

			.sp {
				display: flex;

				view {
					font-size: 28upx;
					padding: 5upx 20upx;
					border-radius: 8upx;
					margin: 0 30upx 20upx 0;
					background-color: #f6f6f6;

					&.on {
						padding: 3upx 18upx;
						border: solid 1upx #f47925;
					}
				}
			}

			.length {
				margin: 30upx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20upx;

				.text {
					font-size: 30upx;
				}

				.number {
					display: flex;
					justify-content: center;
					align-items: center;

					.input {
						width: 80upx;
						height: 60upx;
						margin: 0 10upx;
						background-color: #f3f3f3;
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;

						input {
							width: 80upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							font-size: 26upx;
						}
					}

					.sub,
					.add {
						width: 60upx;
						height: 60upx;
						background-color: #f3f3f3;
						border-radius: 5upx;

						.icon {
							font-size: 30upx;
							width: 60upx;
							height: 60upx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}

		.config {
			height: calc(100% - 100upx);

			.a-t {
				display: flex;
				margin-top: 20upx;

				image {
					width: 170upx;
					height: 170upx;
					flex-shrink: 0;
					border-radius: 8upx;
				}

				.right {
					display: flex;
					flex-direction: column;
					padding-left: 24upx;
					font-size: 24upx;
					color: #666;
					line-height: 42upx;

					.price {
						font-size: 40upx;
						color: #a7241b;
						margin-bottom: 10upx;
					}

					.selected-text {
						margin-right: 10upx;
					}
				}
			}

			.configList {
				// height: 50%;
				margin: 20upx 0;
				height: calc(100% - 350upx);
				overflow: auto;
			}

			.attr-list {
				display: flex;
				flex-direction: column;
				font-size: 30upx;
				padding-top: 30upx;
			}

			.item-list {
				padding: 20upx 0 0;
				display: flex;
				flex-wrap: wrap;

				text {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #eee;
					border: 1upx solid #eee;
					margin-right: 20upx;
					margin-bottom: 20upx;
					border-radius: 20upx;
					min-width: 60upx;
					height: 60upx;
					padding: 0 20upx;
					font-size: 24upx;
					color: #000;
				}

				.selected {
					background: #fef7f6;
					border: 1upx solid #b02920;
					color: #b02920;
				}
			}

			.btn {
				position: fixed;
				bottom: 20upx;
				left: 4%;
				right: 4%;
				width: 92%;
				box-sizing: border-box;
				height: 80upx;
				border-radius: 40upx;
				overflow: hidden;
				display: flex;

				.buy {
					width: 100%;
					height: 80upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28upx;
				}

				.buy {
					background-color: #f14e4f;
				}
			}
		}
	}
</style>
